<template>
   <!-- 员工 -->
   <div class="dashboard-container">
      <div class="app-container">
         <PageTools :showBefore="true">
            <!-- 左侧显示记录 -->
            <!-- <span slot="before">共16条记录</span> -->
            <template #before>
               <span>共{{ page.total }}条记录</span>
            </template>
            <!-- 右侧显示按钮 excel导入  导出， 新增员工 -->
            <template #after>
               <el-button
                  size="small"
                  type="success"
                  @click="$router.push('/import')"
               >
                  excel导入
               </el-button>
               <el-button size="small" type="danger" @click="exportData">
                  excel导出
               </el-button>
               <el-button
                  size="small"
                  type="primary"
                  @click="showDialog = true"
                  :disabled="!checkPermission('POINT-USER-ADD')"
               >
                  新增员工
               </el-button>
            </template>
         </PageTools>
         <!-- 表格 -->
         <!-- v-loading 控制进度条（遮罩层） -->
         <el-table v-loading="loading" :data="list">
            <!-- sortable 排序 -->
            <!-- 表格中如何显示序号 type="index"-->
            <el-table-column label="序号" sortable="" type="index" />
            <el-table-column label="姓名" sortable="" prop="username" />
            <el-table-column width="120px" label="头像" align="center">
               <!-- 插槽 -->
               <template v-slot="{ row }">
                  <img
                     :src="row.staffPhoto"
                     alt=""
                     style="border-radius: 50%; width: 100px; height: 100px; padding: 10px"
                     v-imagerror="
                        require('../../assets/common/bigUserHeader.png')
                     "
                     @click="showQrCode(row.staffPhoto)"
                  />
               </template>
            </el-table-column>
            <el-table-column label="手机号" sortable="" prop="mobile" />
            <el-table-column label="工号" sortable="" prop="workNumber" />
            <!-- formatter 用来格式化序列化内容 某一个列的某一个单元格的值 -->
            <el-table-column
               label="聘用形式"
               sortable=""
               prop="formOfEmployment"
               :formatter="formatEmployment"
            />
            <el-table-column
               label="部门"
               sortable=""
               prop="departmentName"
            />
            <!-- 作用域插槽 + 过滤器 处理时间-->
            <el-table-column
               label="入职时间"
               sortable=""
               prop="timeOfEntry"
            >
               <!-- <template slot-scope="obj"></template> -->
               <!-- obj 就是所有数据的对象 row就是每个节点的数据-->
               <template v-slot="{ row }">
                  <!-- 将时间进行格式化 -->
                  {{ row.timeOfEntry | formatDate }}
               </template>
            </el-table-column>
            <el-table-column
               label="账户状态"
               sortable=""
               prop="enableState"
            >
               <template v-slot="{ row }">
                  <el-switch :value="row.enableState === 1"></el-switch>
               </template>
            </el-table-column>
            <el-table-column
               label="操作"
               sortable=""
               fixed="right"
               width="280"
            >
               <template v-slot="{ row }">
                  <!-- <template slot-scope="{ row }"><template> -->
                  <el-button
                     type="text"
                     size="small"
                     @click="$router.push(`/employees/detail/${row.id}`)"
                  >
                     查看
                  </el-button>
                  <el-button type="text" size="small">转正</el-button>
                  <el-button type="text" size="small">调岗</el-button>
                  <el-button type="text" size="small">离职</el-button>
                  <el-button
                     type="text"
                     size="small"
                     @click="editRole(row.id)"
                  >
                     角色
                  </el-button>
                  <el-button
                     type="text"
                     size="small"
                     @click="delEmployee(row.id)"
                  >
                     删除
                  </el-button>
               </template>
            </el-table-column>
         </el-table>
         <!-- 分页组件 -->
         <el-row
            type="flex"
            justify="center"
            align="middle"
            style="height:60px"
         >
            <el-pagination
               layout="prev, pager, next"
               :current-page="page.page"
               :page-size="page.size"
               :total="page.total"
               @current-change="changePage"
            ></el-pagination>
         </el-row>
      </div>
      <!-- 新增员工弹层组件 -->
      <!-- sync 修饰符 子组件改变父组件的一个语法糖 -->
      <AddEmployee :showDialog.sync="showDialog"></AddEmployee>
      <!-- 二维码弹层 -->
      <el-dialog title="二维码" :visible.sync="showCodeDialog">
         <el-row type="flex" justify="center">
            <canvas ref="myCanvas"></canvas>
         </el-row>
      </el-dialog>
      <!-- 角色弹层组件 -->
      <AssignRole
         :showRoleDialog.sync="showRoleDialog"
         :userId="userId"
         ref="assignRole"
      ></AssignRole>
   </div>
</template>

<script>
import { getEmployeeList, delEmployee } from '../../api/employees'
// 引入员工的枚举对象
import EmployeeEnum from '../../api/constant/employees'
import AddEmployee from './components/add-employee.vue'
// 引入时间过滤器方法
import { formatDate } from '../../filters'
// 二维码包
import QrCode from 'qrcode'
import AssignRole from './components/assign-role.vue'
export default {
   components: {
      AddEmployee,
      AssignRole
   },
   data() {
      return {
         // 接收数组
         list: [],
         page: {
            // 页码
            page: 1,
            // 每页条数
            size: 10,
            // 总数
            total: 0
         },
         // 显示遮罩层
         loading: false,
         // 显示新增员工弹层
         showDialog: false,
         // 显示二维码弹层
         showCodeDialog: false,
         // 显示角色的弹层
         showRoleDialog: false,
         // 定义一个 userId
         userId: ''
      }
   },
   created() {
      // 获取员工的综合列表
      this.getEmployeeList()
   },
   methods: {
      // 获取员工的综合列表
      async getEmployeeList() {
         this.loading = true
         const { total, rows } = await getEmployeeList(this.page)
         this.page.total = total
         this.list = rows
         // 关于第一列的索引也可以这么写，按页码的变化
         // this.list.forEach((item, index) => {
         //   this.page.page 当前页码，第一页不加10
         // (this.page.page - 1) * this.page.size 十位数
         // index + 1 个位数
         //    item.index = (this.page.page - 1) * this.page.size + index + 1
         // })
         this.loading = false
      },
      // newPage 是最新的页码
      changePage(newPage) {
         // 赋值最新的页码
         this.page.page = newPage
         // 重新拉取数据
         this.getEmployeeList()
      },
      // 格式化聘用形式
      formatEmployment(row, column, cellValue, index) {
         // 每一次渲染每一行的时候渲染到这一列的时候，就会执行这个函数
         // 执行这个函数拿到当前行的数据
         // row 就是当前行的数据
         // column 就是列的属性
         // cellValue 就是单元格的值，作用在聘用形式上了，就是每一行聘用形式的值
         // 要去找 1 所对应的值
         // obj 就是找的结果
         const obj = EmployeeEnum.hireType.find(
            item => item.id === cellValue
         )
         // 如果不为空，返回当前对象的 value
         return obj ? obj.value : '未知'
      },
      // 删除员工
      async delEmployee(id) {
         try {
            await this.$confirm('确定删除该员工吗？')
            // 点击了确定进入下方
            await delEmployee(id)
            this.$message.success('删除员工成功')
            // 重新拉取数据
            this.getEmployeeList()
         } catch (error) {
            console.log(error)
         }
      },
      // 导出
      exportData() {
         const headers = {
            姓名: 'username',
            手机号: 'mobile',
            入职日期: 'timeOfEntry',
            聘用形式: 'formOfEmployment',
            转正日期: 'correctionTime',
            工号: 'workNumber',
            部门: 'departmentName'
         }
         import('../../vendor/Export2Excel').then(async excel => {
            // 导出：header从哪里来
            // data 从哪里来
            // excel是引入文件导出的对象
            // 用一页把所有的数据全部包括
            // rows 就是要的数据
            const { rows } = await getEmployeeList({
               page: 1,
               size: this.page.total
            })
            // 转换格式
            // 返回的 data 就是要导出的数据
            const data = this.formatJson(headers, rows)
            // 复杂表头的数组,就是在导出的表头的上方又出现一行表头: 例：
            // const multiHeader = [
            //    ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
            //    [1, 2, 3, 4, 5, 6, 7]
            // ]
            const multiHeader = [
               ['姓名', '主要信息', '', '', '', '', '部门']
            ]
            // 合并选项
            const merges = ['A1:A2', 'B1:F1', 'G1:G2']
            excel.export_json_to_excel({
               // 表头
               header: Object.keys(headers),
               // 数据
               data,
               filename: '员工资料表',
               // 复杂表头
               multiHeader,
               // 合并选项
               merges
            })
            // excel.export_json_to_excel({
            //    header: ['姓名', '工资'],
            //    // 数组里边对应 header 中位置
            //    data: [
            //       ['张三', 3000],
            //       ['李四', 5000]
            //    ],
            //    filename: '员工工资表'
            // })
            // 转换数据格式，要跟表头的顺序对应上
            // 要求：转出的格式是中文
         })
      },
      // 转换格式函数
      // 将表头数据 和 数据进行对应
      // 由 [{}] --> [[]]
      formatJson(headers, rows) {
         // item 是一个对象，把这个对象转成数组，要根据 headers 的顺序转
         // item 是 { mobile: 12336, username: '张三' ...}
         return rows.map(item => {
            // Object.keys(headers) 得到的是 中文 的数组 key 的结构
            // 两个 return 形成 数组中套数组
            // Object.keys(headers) 是[ '手机号','姓名', '入职日期'.... ]
            return Object.keys(headers).map(key => {
               // 需要判断 字段的格式
               if (
                  headers[key] === 'timeOfEntry' ||
                  headers[key] === 'correctionTime'
               ) {
                  // 格式化日期
                  return formatDate(item[headers[key]])
               } else if (headers[key] === 'formOfEmployment') {
                  const obj = EmployeeEnum.hireType.find(
                     obj => obj.id === item[headers[key]]
                  )
                  return obj ? obj.value : '未知'
               }
               // headers[key] 所对应的英文名，通过 item 找到英文名所对应的值
               // item[headers[key]] 是值所形成的数组
               // 例： headers[key] = headers.手机号 = 'mobile'
               // item['mobile']  = item 对象里边英文名手机号的数据
               // [ '12336','张三'.... ]
               return item[headers[key]]
            })
         })
         // 简写，但是需要处理时间格式问题
         // return rows.map(item =>
         //    Object.keys(headers).map(key => item[headers[key]])
         // )
      },
      // 点击图片转换二维码
      showQrCode(url) {
         // 只有url存在的情况下，才弹出层
         if (url) {
            // 弹层显示为 true，数据更新了，但是我的弹层不会立刻出现，页面的渲染异步
            this.showCodeDialog = true
            // 可以等到上一次的数据更新完毕，页面渲染完毕之后执行
            this.$nextTick(() => {
               // 此时可以确认已经有 ref 对象了
               // 将地址转换成二维码
               // dom 对象，跟路径地址，字符串
               // 如果转换的二维码后面信息是一个地址的话，就会跳转到该地址，
               // 如果不是地址就会显示内容
               QrCode.toCanvas(this.$refs.myCanvas, url)
            })
         } else {
            this.$message.warning('该用户还未上传头像')
         }
      },
      // 角色
      async editRole(id) {
         // 给 props 赋值，渲染，是异步的
         this.userId = id
         // 会调用子组件方法，异步方法，先强制异步方法执行完了，再弹层
         await this.$refs.assignRole.getUserDetailById(id)
         this.showRoleDialog = true
      }
   }
}
</script>

<style></style>
